<template>
	<view class="cn wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<image @click="back()" class="back" src="@/static/img/chat-09.png" mode="widthFix"></image>
				<view class="title">{{title}}</view>
			</view>
		</view>
		<view class="cn-part main">
			<view class="ct-detail">
				<view class="f-tp">
					<image src="../../static/img/c_icon4.png"></image>
					{{ contype == 1 ? '买入' : '卖出' }}数量
					<view class="" @click="isnew=!isnew" v-if="contype == 1">
						新人
						<uni-icons :color="isnew?'#3F93FF':'#999999'" :type="isnew? 'checkbox-filled':'circle'"
							size="24"></uni-icons>
					</view>
				</view>
				<view class="o-item">
					<view class="o-item-val" v-for="(item,index) in options" :key="index"
						:class="actIndex == index ? 'act-val' : '' " @click="selectSum(index)">
						{{ item }}
					</view>
				</view>
				<view class="f-side">
					<view class="side-tp">
						<image src="../../static/img/con_2.png"></image>
						交易区间价
					</view>
					<view class="side-val side-r-val">{{ entrustObj.sellPrice }}~{{entrustObj.buyPrice}}U</view>
				</view>
				<!-- <view class="f-sub">
					温馨提示：
					<view>
						当前区间价<text>{{ entrustObj.referencePrice }}</text>
					</view>
				</view> -->

				<view class="trade-pra">
					<view class="f-side">
						<view class="side-tp">
							<image src="../../static/img/con_3.png"></image>
							{{ contype == 1 ? '所需' : '获得' }}USDA
						</view>
						<view class="f-kend">≈{{ entrustObj.sellPriceTotal }}~{{ entrustObj.buyPriceTotal }}U</view>
						<!-- <view class="side-val">
							{{ entrustObj.priceUsdtMax }}USDT~{{ entrustObj.priceUsdtMin }}USDT
						</view> -->
					</view>
					<view class="point_b" v-if="contype == 1"><text>余额: </text>{{point.usdtBalance}}U</view>
					<!-- <view class="f-kend mt">{{ entrustObj.priceUsdtMax }}USDT~{{ entrustObj.priceUsdtMin }}USDT</view> -->
					<!-- <view class="f-kend">≈{{ entrustObj.buyPriceTotal }}~{{ entrustObj.sellPriceTotal }}</view> -->
				</view>

				<view class="f-side">
					<view class="side-tp">
						<image src="../../static/img/con_4.png"></image>
						{{ contype == 1 ? '获得' : '需燃烧' }}ABT
					</view>
					<view class="side-val">{{ contype == 1 ? entrustObj.buyDedicateValue:buyNum }}</view>
				</view>

				<view class="f-side" v-if="contype==1&&!isnew">
					<view class="side-tp">
						<image src="../../static/img/con_4.png"></image>
						消耗权益积分
					</view>
					<view class="side-val">{{jifen}}</view>
				</view>

				<view class="options-time" v-if="contype == 1">
					<view class="f-side">
						<view class="side-tp">
							<image src="../../static/img/con_6.png"></image>
							ABT获得时间
						</view>
						<view class="side-val">获得时间越长，数量越多</view>
					</view>
					<view class="time-list">
						<view class="time-item" :class="dayIndex == index ? 'time-act' : ''" v-for="(item,index) in 3"
							:key="index" @click="selectDay(item,index)">{{ item }}天</view>
					</view>
				</view>

				<view class="sell-tip" v-else>
					<view class="f-r-end">
						<text>当前CC余额</text>
						<image src="../../static/img/con_5.png"></image>
						{{point.ktcBalance||0}}
					</view>
				</view>

				<view class="hint2" v-if="contype == 1&&isnew">购买的资产仅用于兑换</view>

			</view>
		</view>

		<view class="ct-btn" @click="handleConfir">确认{{ contype == 1 ? '买入' : '出售' }}</view>
		<view class="hint" v-if="contype != 1">卖出需支付0.02%的手续费</view>

		<uni-popup ref="popup">
			<view class="box">
				<view class="box_title">确认<text>{{ contype == 1 ? '买入' : '出售' }}</text>吗？</view>
				<view class="box_text">钱包密码</view>
				<input type="text" placeholder="请输入钱包密码" :password="showPassword" v-model="password"
					class="theme-ipt-bg">
				<view class="box_btn">
					<view @click="close()" class="btn_1">取消</view>
					<view @click="advert" class="btn_2">确认</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		throttle
	} from '@/utils/common.js'
	import {
		getEntrustParame,
		getWalletInfoApi,
		issueEntrust,
		getDeductionEquityPoints
	} from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		mixins: [navBarMixin],
		data() {
			return {
				options: [10, 20, 50, 100, 500, 1000, 2000],
				contype: '',
				actIndex: 0,
				dayIndex: 0,
				dayTime: '1',
				password: '',
				showPassword: true,
				buyNum: 10,
				entrustObj: '',
				point: '',
				title: '',
				isnew: false,
				jifen: '',
			}
		},
		methods: {
			getjifen() {
				getDeductionEquityPoints({
					buyNum: this.buyNum
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.jifen = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			back(id) {
				uni.navigateBack()
			},
			selectSum(index) {
				if (index > 4) {
					uni.showToast({
						title: '暂未开放',
						icon: 'none'
					})
				} else {
					this.actIndex = index
					this.buyNum = this.options[index]
					this.getEntrustData()
					if (this.contype == 1) this.getjifen()
				}

			},
			selectDay(item, index) {

				if (index > 0) {
					uni.showToast({
						title: '暂未开放',
						icon: 'none'
					})
				} else {
					this.dayTime = item
					this.dayIndex = index
				}
			},
			handleConfir() {
				this.$refs.popup.open('center')
			},
			close() {
				this.password = ''
				this.$refs.popup.close()
			},
			advert() {
				throttle(async () => {
					const res = await issueEntrust({
						buyNum: this.buyNum,
						tradeType: this.contype,
						unitPrice: this.contype == 1 ? this.entrustObj.buyPrice : this.entrustObj
							.sellPrice,
						// minPrice: this.entrustObj.minPrice,
						// maxPrice: this.entrustObj.maxPrice,
						// minPriceUsdt: this.entrustObj.priceUsdtMin,
						// maxPriceUsdt: this.entrustObj.priceUsdtMax,
						dedicate: this.contype == 1 ? this.entrustObj.buyDedicateValue : '',
						holdDay: this.contype == 1 ? this.dayTime : '',
						password: this.password,
						newArea: this.isnew ? 'Y' : 'N'
					})
					this.close()
					if (res.code == 0) {
						uni.showToast({
							title: '委托成功!',
							icon: 'none',
							duration: 2000,
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
						})
					}
				}, 4000)
			},
			async getEntrustData() {
				const res = await getEntrustParame({
					buyNum: this.buyNum
				})
				console.log(res);
				if (res.code == 0) {
					this.entrustObj = res.data
				}
			},
			async account() {
				// getUserAccount().then(res => {
				// 	this.point = res.obj
				// })
				getWalletInfoApi().then(res => {
					console.log(res);
					this.point = res.data
				})
			}
		},
		computed: {
			buyPriceTotalbuyPriceTotal() {
				return (this.buyNum * this.entrustObj.minPrice).toFixed(1)
			},
			maxRMB() {
				return (this.buyNum * this.entrustObj.maxPrice).toFixed(1)
			}
		},
		onLoad(e) {

			this.contype = e.type

			uni.setNavigationBarTitle({
				title: this.contype == 1 ? '委托买入' : '委托出售'
			});
			this.title = this.contype == 1 ? '委托买入' : '委托出售'
			this.getEntrustData()
			this.account()
			if (this.contype == 1) this.getjifen()
		},
	}
</script>

<style scoped lang="scss">
	.cn {
		// padding: 30rpx;
		overflow: hidden;

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				// box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(50, 50, 50, 0.1);
				box-sizing: border-box;
				position: relative;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.back {
					width: 20rpx;
					position: absolute;
					left: 30rpx;
				}

			}
		}

		.cn-part {
			min-height: 200rpx;
			background: #fff;
			border-radius: 14rpx;
			margin: 40rpx 30rpx;

			.ct-detail {
				padding: 30rpx;
				padding-bottom: 60rpx;

				.f-tp {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 28rpx;
					font-weight: 500;

					image {
						width: 48rpx;
						height: 48rpx;
						display: block;
						margin-right: 20rpx;
					}

					view {
						// flex: 1;
						text-align: right;
						display: flex;
						align-items: center;
						margin-left: auto;
						font-weight: 500;
						color: red;

						.uni-icons {
							margin-left: 6rpx;
							;
						}
					}
				}

				.o-item {
					// width: calc(100% / 4);
					// background-color: pink;
					margin-top: 30rpx;

					// box-sizing: border-box;
					.o-item-val {
						display: inline-block;
						width: 122rpx;
						height: 64rpx;
						line-height: 64rpx;
						margin-right: 42rpx;
						margin-bottom: 30rpx;
						text-align: center;
						border: 1rpx solid #ddd;
						border-radius: 8rpx;
						font-size: 28rpx;

						&.act-val {
							background: #E6F1FF;
							color: #3F93FF;
							border: 2rpx solid #3F93FF;
						}

						&:nth-of-type(4) {
							margin-right: 0;
						}

						// &:nth-of-type(5),
						&:nth-of-type(6),
						&:nth-of-type(7) {
							background-color: #EEEEEE;
							color: #999999;
							border: 1rpx solid #EEEEEE;
							margin-bottom: 0;
						}

					}
				}

				.f-side {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 40rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #eee;

					.side-tp {
						display: flex;
						align-items: center;
						color: #333;
						font-size: 28rpx;

						image {
							display: block;
							width: 48rpx;
							height: 48rpx;
							margin-right: 20rpx;
						}

					}

					.f-kend {
						font-size: 28rpx !important;
					}

					.side-val {
						font-size: 28rpx;

						&.side-r-val {
							color: #FF453A;
						}
					}
				}

				.f-sub {
					margin-top: 20rpx;
					margin-bottom: 40rpx;
					color: #999;
					font-size: 24rpx;

					text {
						color: #FF453A;
					}
				}

				.trade-pra {
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #eee;

					.f-side {
						padding-bottom: 0;
						border-bottom: none;
					}

					.f-kend {
						display: flex;
						// justify-content: flex-en;
						font-size: 24rpx;
						color: #ff453A;

						&.mt {
							margin-top: 4rpx;
							font-size: 28rpx;
							color: #333;
						}
					}
				}

				.sell-tip {
					margin-top: 24rpx;

					.f-r-end {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #FF453A;

						text {
							color: #999;
						}

						image {
							width: 40rpx;
							height: 40rpx;
							margin: 0 8rpx;
						}
					}
				}


				.options-time {
					.f-side {
						border-bottom: none;

						.side-val {
							font-size: 24rpx;
							color: #999;
						}
					}

					.time-list {
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;

						.time-item {
							width: 134rpx;
							height: 64rpx;
							line-height: 64rpx;
							text-align: center;
							// border: 1rpx solid #ddd;
							background-color: #EEEEEE;
							color: #999999;
							border-radius: 8rpx;
							font-size: 28rpx;

							&.time-act {
								background: #E6F1FF;
								color: #3F93FF;
								border: 2rpx solid #3F93FF;
							}
						}
					}
				}

			}
		}

		.ct-btn {
			width: 584rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			color: white;
			background: #3F93FF;
			border-radius: 52rpx;
			margin: 80rpx auto 40rpx;
		}

		.con-img {
			position: absolute;
			bottom: 100%;
			right: 0;
			margin-left: auto;
			width: 230rpx;
			height: 264rpx;
			padding-right: 20rpx;

			image {
				display: block;
				width: 230rpx;
			}

		}

		.box {

			width: 583rpx;
			height: 700rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: contain;
			overflow: hidden;
			position: relative;

			.theme-ipt-bg {
				padding: 0 20rpx;
				margin-top: 30rpx;
				background: #F7F7F7;
			}
		}

		.box_title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
			margin-top: 220rpx;

			text {
				color: #FF453A;
			}
		}

		.box_text {
			font-size: 28rpx;
			margin: 36rpx 40rpx 10rpx 40rpx;
		}

		.box input {
			// background-color: #F7F7F7;
			height: 84rpx;
			line-height: 84rpx;
			background: #F4F4F4;
			border-radius: 6rpx;
			padding: 0 30rpx;
			margin: 0 40rpx;
			font-size: 26rpx;
		}

		.box_btn {
			display: flex;
			justify-content: space-between;
			margin: 50rpx 52rpx 0;

			view {
				width: 200rpx;
				line-height: 76rpx;
				text-align: center;
			}

			.btn_1 {
				border: 2rpx solid #3F93FF;
				border-radius: 40rpx;
				color: #3F93FF;
			}

			.btn_2 {
				border-radius: 40rpx;
				background: #3F93FF;
				color: #fff;
			}
		}


		.hint {
			color: #FF453A;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.hint2 {
		color: #FF453A;
		font-size: 24rpx;
		// text-align: center;
		margin-top: 40rpx;
	}

	.point_b {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #FF453A;

		text {
			color: #999999;
		}
	}
</style>